<template>
    <div class="rankings-container">
        <h2>排行榜</h2>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="ranking">
                    <h3>美食排行榜</h3>
                    <ul>
                        <li v-for="(item, index) in foodRankings" :key="item.storeId">
                            <span class="rank-number">{{ index + 1 }}.</span>
                            <strong>{{ item.storeName }}</strong> - {{ item.score }}
                            <p class="item-details">
                                <span class="item-date">店铺ID: {{ item.storeId }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="ranking">
                    <h3>咨询排行榜</h3>
                    <!-- <ul>
                        <li v-for="(item, index) in consultationRankings" :key="item.storeId">
                            <span class="rank-number">{{ index + 1 }}.</span>
                            <strong>{{ item.storeName }}</strong> - {{ item.score }}
                            <p class="item-details">
                                <span class="item-date">店铺ID: {{ item.storeId }}</span>
                            </p>
                        </li>
                    </ul> -->
                </div>
            </el-col>
            <el-col :span="8">
                <div class="ranking">
                    <h3>其他排行榜</h3>
                    <!-- You can add other rankings here -->
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getStoreRank } from '@/api/virtualStore';

const foodRankings = ref([]);
const consultationRankings = ref([]);

const getRankings = async () => {
    const foodResponse = await getStoreRank();
    if (foodResponse.code === 200) {
        foodRankings.value = foodResponse.data;
    }

    // const consultationResponse = await getConsultationRank();
    // if (consultationResponse.code === 200) {
    //     consultationRankings.value = consultationResponse.data;
    // }

    console.log("美食排行榜数据:", foodRankings.value);
    // console.log("咨询排行榜数据:", consultationRankings.value);
};

onMounted(() => {
    getRankings();
});
</script>

<style>
.rankings-container {
    width: 1300px;
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 97%;
}

.ranking {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 4px;
    background-color: white;
    margin-bottom: 20px;
}

.ranking h3 {
    margin: 0 0 10px;
    color: cornflowerblue;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 5px 0;
}

.rank-number {
    font-weight: bold;
    color: #333;
    margin-right: 5px;
}

.item-details {
    font-size: 14px;
    color: #666;
}

.item-date {
    display: block;
}
</style>